{extend name="./template/default/pc/pub/base.html" /}
{block name="seo"}
<title>{$cate?$cate.cate_name:'全部'}小说分类-{$site_name}</title>
<meta name="description" content="{$site_name}{$cate?$cate.cate_name:'全部'}小说分类">
{/block}
{block name="main"}
<div class="body-bg" id="app">
    <div class="wrap">
        <div class="containerbox">
            <div class="block10"></div>
            <div class="wrap1200 ranklist">
                <div class="leftbar fl">
                    <div class="selectlist">
                        <div class="select selstyle">
                            <span class="tname">分类</span>
                            <ul class="textlist">
                                <li :class="{'on' : cate == -1}">
                                    <a @click="cateChange(-1)">全部</a>
                                </li>
                                {raccoon:cates name="cates" order="sortid desc"}
                                <li :class="{'on' : cate == {$vo.sortid}}">
                                    <a @click="cateChange({$vo.sortid})">{$vo.cate_name}</a>
                                </li>
                                {/raccoon:cates}
                            </ul>
                        </div>
                        <div class="select selnum">
                            <span class="tname">字数</span>
                            <ul class="textlist">
                                <li :class="{'on' : words == -1}">
                                    <a @click="wordsChange(-1)">全部</a>
                                </li>
                                <li :class="{'on' : words == 300000}">
                                    <a @click="wordsChange(300000)">30万字以内</a>
                                </li>
                                <li :class="{'on' : words == 500000}">
                                    <a @click="wordsChange(500000)">50万字以内</a>
                                </li>
                                <li :class="{'on' : words == 1000000}">
                                    <a @click="wordsChange(1000000)">100万字以内</a>
                                </li>
                                <li :class="{'on' : words == 2000000}">
                                    <a @click="wordsChange(2000000)">200万字以内</a>
                                </li>
                            </ul>
                        </div>
                        <div class="select selstatus">
                            <span class="tname">状态</span>
                            <ul class="textlist">
                                <li :class="{'on' : fullflag == -1}">
                                    <a @click="statusChange(-1)">全部</a>
                                </li>
                                <li :class="{'on' : fullflag == 0}">
                                    <a @click="statusChange(0)">连载</a>
                                </li>
                                <li :class="{'on' : fullflag == 1}">
                                    <a @click="statusChange(1)">完本</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-cont-box fr rankdata">
                    <div class="rankdatacont">
                        <div class="tabsbox1">
                            <div class="rankday">
                                <div class="tabsday-cont">
                                    <div class="tab-cont-1 secd-rank-list">
                                        <div class="listboxw">
                                            {raccoon:pagedbooks name="pagedBooks" pagesize="20" order="lastupdate desc"
                                            where="sortid='$cate_selector' and words<='$words_selector' and fullflag='$end_selector'"}
                                            <dl>
                                                <dt>
                                                    <a href="/{$book_ctrl}/{$vo.param}" title="{$vo.articlename}">
                                                        <img class="lazyimg" data-original="{$imgServer}{$vo.cover}" src="https://p.pstatp.com/origin/ffa400036691f82c85e5" style="display: block;">
                                                    </a>
                                                </dt>
                                                <dd>
                                                    <a href="/{$book_ctrl}/{$vo.param}" class="bigpic-book-name" title="{$vo.articlename}">
                                                        {$vo.articlename}
                                                    </a>
                                                    <p>
                                                        <a target="_blank">
                                                            {$vo.author}
                                                        </a>|
                                                        <a href="/{$booklist_act}?sortid={$vo.sortid}" target="_blank">
                                                            {$vo.cate.cate_name}
                                                        </a>|
                                                        {$vo.fullflag == 1 ? '已完结' : '连载中'}
                                                    </p>
                                                    <p class="big-book-info">
                                                        {$vo.intro}
                                                    </p>
                                                    <p>
                                                        <span href="javascript:;">{$vo.words}字 |</span>
                                                        <span class="red">{$vo.lastupdate|date='Y-m-d H:i'}</span>
                                                    </p>
                                                </dd>
                                            </dl>
                                            {/raccoon:pagedbooks}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pages_bottom" style="display: block;">
                            <ul>
                                <ul class="pagination">
                                    {if $page.last_page > 1}
                                    {if $page.current_page == 1}
                                    <li class="disabled"><span>«</span></li>
                                    {else/}
                                    <li><a href="/{$booklist_act}?page={$page.current_page-1}{$param}" title="上一页">«</a></li>
                                    {/if}

                                    {for start="1" end="$page.last_page + 1"}
                                    {if $i == $page.current_page }
                                    <li class="active"><span>{$i}</span></li>
                                    {elseif ($i > $page.current_page - 4 && $i < $page.current_page + 5)/}
                                    <li><a href="/{$booklist_act}?page={$i}{$param}" title="第{$i}页">{$i}</a></li>
                                    {/if}
                                    {/for}

                                    {if $page.current_page == $page.last_page}
                                    <li><a>»</a></li>
                                    {else/}
                                    <li><a href="/{$booklist_act}?page={$page.current_page+1}{$param}" title="下一页">»</a></li>
                                    {/if}
                                    {/if}
                                </ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cate: {$cate_selector},
            words: {$words_selector},
            fullflag: {$end_selector},
        },
        methods: {
            wordsChange(words) {
                this.words = words
                window.location.href = '/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            },
            cateChange(cate) {
                this.cate = cate
                window.location.href = '/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            },
            statusChange(fullflag) {
                this.fullflag = fullflag
                window.location.href = '/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            }
        }
    })
</script>
{/block}